<template>
  <div class="app-container page-container right-side-dialog">
    <!-- 搜索条件 -->
    <div class="header-search single_line">
      <el-form ref="search_form" :model="search" :inline="true" label-width="0">
        <div class="form-area">
          <div class="search_view">
            <el-form-item>
              <el-input v-model="search.docker_name" placeholder="服务器名称"/>
            </el-form-item>
            <el-form-item>
              <el-input v-model="search.docker_host" placeholder="服务器IP"/>
            </el-form-item>
            <el-form-item>
              <el-input v-model="search.docker_port" placeholder="服务器端口号"/>
            </el-form-item>
            <div class="btn-area">
              <el-button type="primary" size="mini" round @click="getServerPaginateData()">搜索</el-button>
              <el-button size="mini" round @click="resetData()">重置</el-button>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="content_view">
      <!-- 操作按鈕 -->
      <div class="main-header">
        <el-row :gutter="20">
          <el-col :span="4" class="left">服务器列表</el-col>
          <el-col :span="20" class="right">
            <el-button v-if="auth.save != -1" type="primary" size="mini" round @click="serverEditVisible = true">新增
            </el-button>
          </el-col>
        </el-row>
      </div>
      <el-table ref="table" :data="server_paginate_data" :height="height-130" size="mini" strip>
        <el-table-column label="序号" type="index" width="60"/>
        <el-table-column label="服务器名称" prop="docker_name" min-width="150" align="left"/>
        <el-table-column label="服务器地址" min-width="150" align="left">
          <template slot-scope="scope">
            <div>{{ scope.row.docker_host }}:{{ scope.row.docker_port }}</div>
          </template>
        </el-table-column>
        <el-table-column label="API版本号" prop="api_version" min-width="150" align="left"/>
        <el-table-column label="日志服务端口" prop="logger_server_port" min-width="150" align="left"/>
        <el-table-column label="操作" width="180" fixed="right" align="left">
          <template slot-scope="scope">
            <el-button v-if="auth.update != -1" type="text" @click="serverUpdate(scope.row.server_id)">修改</el-button>
            <el-button v-if="auth.delete != -1" class="font_red" type="text" @click="serverDelete(scope.row.server_id)">
              删除
            </el-button>
            <el-button v-if="auth.console != -1" type="text" @click="cmdLine(scope.row)">控制台</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="page"
        :limit.sync="page_size"
        @pagination="getServerPaginateData"
      />
    </div>
    <!-- 新增编辑服务器 -->
    <el-dialog
      :title="server_edit_form.title"
      :visible.sync="serverEditVisible"
      :close-on-click-modal="false"
      width="720px"
    >
      <el-scrollbar wrap-class="vertical_scrollbar" :style="{height: height + 'px'}">
        <el-form ref="server_edit_form" label-width="20px" :model="server_edit_form">
          <el-row>
            <el-col :span="12">
              <el-form-item prop="docker_name">
                <div class="form_lable">服务器名称</div>
                <el-input v-model="server_edit_form.docker_name" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="api_version">
                <div class="form_lable">API版本号</div>
                <el-input v-model="server_edit_form.api_version" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="docker_name">
                <div class="form_lable">服务器IP</div>
                <el-input v-model="server_edit_form.docker_host" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="docker_port">
                <div class="form_lable">服务器端口</div>
                <el-input v-model="server_edit_form.docker_port" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="cert_path">
                <div class="form_lable">密钥文件路径</div>
                <el-input v-model="server_edit_form.cert_path" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="cert_path_window">
                <div class="form_lable">密钥文件路径windows</div>
                <el-input v-model="server_edit_form.cert_path_window" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="config_path_window">
                <div class="form_lable">配置文件路径</div>
                <el-input v-model="server_edit_form.config_path" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="config_path">
                <div class="form_lable">配置文件路径windows</div>
                <el-input v-model="server_edit_form.config_path_window" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="max_connect">
                <div class="form_lable">最大连接数</div>
                <el-input v-model="server_edit_form.max_connect" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="logger_server_port">
                <div class="form_lable">日志服务端口</div>
                <el-input v-model="server_edit_form.logger_server_port" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="registry_url">
                <div class="form_lable">注册地址</div>
                <el-input v-model="server_edit_form.registry_url" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="email">
                <div class="form_lable">邮箱</div>
                <el-input v-model="server_edit_form.email" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="user_name">
                <div class="form_lable">用户名</div>
                <el-input v-model="server_edit_form.user_name" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="password">
                <div class="form_lable">用户密码</div>
                <el-input v-model="server_edit_form.password" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item prop="note">
                <div class="form_lable">描述</div>
                <el-input v-model="server_edit_form.note" type="textarea" placeholder="请输入"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
      <div class="dialog-btn" style="text-align: right">
        <el-button size="mini" round @click="serverEditVisible = false">取消</el-button>
        <el-button type="primary" size="mini" round @click="serverEditSubmit()">保存</el-button>
      </div>
    </el-dialog>
    <!-- 控制台 -->
    <el-dialog
      :visible.sync="commandLine" 
      :close-on-click-modal="false" 
      width="720px"
      class="server_view"
      @opened="openCMD" @closed="closeCMD"
    >
      <div class="consoleTitle">
        <span>{{containerTitle0}}</span>
        <span style="margin-left: 60px;">{{containerTitle1}}</span>
      </div>
      <el-scrollbar wrap-class="vertical_scrollbar" :style="{height: height + 'px'}">
        <Xterm :containerId="containerId" 
              :containerName="containerName" 
              :server-id="server_id" 
              url="/websocket/server/cmd"
              ref="xterm"/>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>
<script>
import { paginate, save, update, detail, serverDelete } from '@/api/pajx/server/server'
import { mapState } from 'vuex'
import Pagination from '@/components/Pagination'

import Xterm from '@/components/Xterm'

export default {
  name: 'DockerServer',
  components: { Pagination, Xterm },
  data() {
    return {
      height: window.innerHeight - 135,
      auth: {},
      search: {},
      page: 1,
      page_size: 20,
      total: 0,
      server_paginate_data: [],
      serverEditVisible: false,
      server_edit_form: {
        title: '新增服务器',
        type: 'add',
        docker_name: '',
        docker_host: '',
        docker_port: '',
        cert_path: '',
        cert_path_window: '',
        config_path: '',
        config_path_window: '',
        api_version: '',
        registry_url: '',
        user_name: '',
        password: '',
        email: '',
        max_connect: '',
        logger_server_port: '',
        note: ''
      },
      commandLine: false,
      containerId: '',
      containerTitle: '',
      server_id: ''
    }
  },
  computed: {
    ...mapState({
      permission: state => state.permission.permission
    })
  },
  watch: {
    serverEditVisible(val) {
      if (val) {
        this.server_edit_form.title = this.server_edit_form.type === 'add' ? '新增服务器' : '编辑服务器'
      }
      if (!val) {
        Object.assign(this.$data.server_edit_form, this.$options.data().server_edit_form)
      }
    }
  },
  beforeMount() {
    Object.assign(this.$data, this.$store.state.server.data)
  },
  beforeDestroy() {
    this.$store.commit('commitServerData', this.$data)
  },
  created() {
    this.permissionAuth()
    this.getServerPaginateData()
  },
  methods: {
    // 获取按钮权限
    permissionAuth() {
      this.auth.save = this.permission.indexOf('/api/docker/server/save')
      this.auth.detail = this.permission.indexOf('/api/docker/server/detail')
      this.auth.update = this.permission.indexOf('/api/docker/server/update')
      this.auth.delete = this.permission.indexOf('/api/docker/server/delete')
      this.auth.console = this.permission.indexOf('/api/docker/server/console')
    },
    // 重置搜索选项
    resetData() {
      this.search = {}
    },
    // 获取服务器列表
    getServerPaginateData() {
      paginate(this.search, this.page, this.page_size).then(response => {
        this.server_paginate_data = response.data.list
        this.total = response.data.totalRow
      })
    },
    // 新增编辑
    serverEditSubmit() {
      if (this.server_edit_form.type === 'add') {
        save(this.server_edit_form).then(response => {
          this.serverEditVisible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getServerPaginateData()
        })
      }
      // 修改
      if (this.server_edit_form.type === 'edit') {
        update(this.server_edit_form).then(response => {
          this.serverEditVisible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getServerPaginateData()
        })
      }
    },
    // 修改回显
    serverUpdate(server_id) {
      detail(server_id).then(response => {
        this.serverEditVisible = true
        this.server_edit_form.docker_name = response.data.docker_name
        this.server_edit_form.docker_host = response.data.docker_host
        this.server_edit_form.docker_port = response.data.docker_port
        this.server_edit_form.cert_path = response.data.cert_path
        this.server_edit_form.cert_path_window = response.data.cert_path_window
        this.server_edit_form.config_path = response.data.config_path
        this.server_edit_form.config_path_window = response.data.config_path_window
        this.server_edit_form.api_version = response.data.api_version
        this.server_edit_form.registry_url = response.data.registry_url
        this.server_edit_form.user_name = response.data.user_name
        this.server_edit_form.password = response.data.password
        this.server_edit_form.email = response.data.email
        this.server_edit_form.max_connect = response.data.max_connect
        this.server_edit_form.logger_server_port = response.data.logger_server_port
        this.server_edit_form.note = response.data.note
        this.server_edit_form.server_id = server_id
        this.server_edit_form.type = 'edit'
      })
    },
    serverDelete(server_id) {
      this.$confirm('确认删除？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        serverDelete(server_id).then(response => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getServerPaginateData()
        })
      }).catch(() => {
      })
    },
    cmdLine(row) {
      this.containerId = row.server_id
      this.server_id = row.server_id
      this.containerTitle0 = '服务器名称：' + row.docker_name 
      this.containerTitle1 = '服务器地址：' + row.docker_host
      this.commandLine = true
    },
    openCMD() {
      // this.$refs.xterm.websocketConnect()
    },
    closeCMD() {
      // this.$refs.xterm.closeWebSocket()
    }
  }
}
</script>
<style lang="scss">
  .font_red {
    color: #FF5722;
  }

  .consoleTitle{
    position: absolute;
    left: 20px;
    top: 16px;
  }
</style>
